/*
 * @Description: 流程管理操作组件
 * @Author: Rfan
 * @Date: 2022-12-11 11:34:13
 * @LastEditTime: 2022-12-11 16:49:44
 */

import { useEffect, useMemo, useState } from 'react';
import { Button, Space } from 'antd';
import { useFlowMgtContext } from '../contexts/FlowMgtContext';
import AddFlowDialog from './dialogs/AddFlowDialog';
import DesignFlowDialog from '@/view/sysMaintenance/FlowMgt/components/dialogs/DesignFlowDialog';

const PageOperate = () => {
  const { selectItems, delFlowItemFunc } = useFlowMgtContext();

  // 增加弹窗标志
  const [addDialogVisible, setAddDialogVisible] = useState(false);

  const delSelect = () => {
    delFlowItemFunc(selectItems);
  };

  return (
    <div className="filter-container">
      <p className="page-title">流程管理列表</p>
      <Space size="small">
        <Button
          onClick={() => {
            setAddDialogVisible(true);
          }}
        >
          新建
        </Button>
        {/* <Button */}
        {/*  onClick={() => { */}
        {/*    setDesignDialogVisible(true); */}
        {/*  }} */}
        {/* > */}
        {/*  design */}
        {/* </Button> */}
        <Button
          disabled={selectItems.length <= 0}
          onClick={() => {
            delSelect();
          }}
        >
          删除
        </Button>
        <Button
          disabled={selectItems.length <= 0}
          onClick={() => {
            delSelect();
          }}
        >
          流程实例管理
        </Button>
      </Space>

      {/* 新增弹窗 */}
      {useMemo(
        () => (
          <AddFlowDialog
            visible={addDialogVisible}
            onClose={() => {
              setAddDialogVisible(false);
            }}
          />
        ),
        [addDialogVisible]
      )}

      {/* 实例管理弹窗 */}
      {useMemo(
        () => (
          <AddFlowDialog
            visible={addDialogVisible}
            onClose={() => {
              setAddDialogVisible(false);
            }}
          />
        ),
        [addDialogVisible]
      )}
    </div>
  );
};

export default PageOperate;
